<template>
  <div class="home">
    <div class="first">
      <el-card class="item" :body-style="{ padding: '0' }">
        <Number name="待处理" unit="张" />
      </el-card>
      <el-card class="item" :body-style="{ padding: '0' }">
        <Number name="已完成" unit="张" />
      </el-card>
      <el-card class="item" :body-style="{ padding: '0' }">
        <Number name="共计" unit="字" />
      </el-card>
    </div>
    <div class="second">
      <Notice class="noticeList" />
      <RecentWork class="recentWork" />
    </div>
    <div class="third">
      <el-card class="dailyCharts">
        <DailyCharts />
      </el-card>
      <el-card class="completionCharts">
        <CompletionCharts />
      </el-card>
    </div>
  </div>
</template>

<script>
import Notice from './components/Notice'
import CompletionCharts from './components/CompletionCharts'
import DailyCharts from './components/DailyCharts'
import Number from './components/Number'
import RecentWork from './components/RecentWork'
export default {
  components: {
    Notice,
    CompletionCharts,
    DailyCharts,
    Number,
    RecentWork
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100%;
  .first {
    display: flex;
    margin-bottom: 20px;
    .el-card {
      border-radius: 0;
      margin: 0 10px;
    }
    .item {
      flex: 1;
      &:nth-of-type(1) {
        .number {
          background: linear-gradient(90deg, #02bfa1, #5871f6);
        }
      }
      &:nth-of-type(2) {
        .number {
          background: linear-gradient(90deg, #dc3ed7, #3921c1);
        }
      }
      &:nth-of-type(3) {
        .number {
          background: linear-gradient(90deg, #89c605, #0ef38f);
        }
      }
    }
  }
  .second {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 20px;
    .noticeList {
      width: 49%;
      flex-shrink: 0;
    }
    .recentWork {
      width: 49%;
      flex-shrink: 0;
    }
  }
  .third {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 20px;
    .dailyCharts {
      width: 69%;
      flex-shrink: 0;
    }
    .completionCharts {
      width: 29%;
      flex-shrink: 0;
    }
  }
}
</style>
